<template>
  <div class="page-view">
    <div class="point-view">
      <div class="point-title">
        <div class="left-blue" />
        <span class="point-name-span">
          知识点：{{ PointList[curPointIndex].PointName }}
        </span>
      </div>
      <div class="point-content">
        <!-- eslint-disable vue/no-v-html -->
        <VHtml
          tag="div"
          :html="PointList[curPointIndex].PointContent"
          :hooks="{afterSanitizeElements: 'afterSanitizeElements_underline'}"
          :class="isReciting ? 'show-points' : 'hide-points'"
        />
      <!-- eslint-enable vue/no-v-html -->
      </div>
    </div>
    <div class="question-footer">
      <div
        class="prev qnav nav"
        :class="curPointIndex === 0 && 'disabled'"
        @click="goPrev"
      >
        <van-icon name="arrow-left" />上一个
      </div>
      <div>
        <van-button
          class="card-nav nav"
          @click="switchUnderline"
        >
          {{ isReciting ? '背诵' : '查看' }}
        </van-button>
      </div>
      <div
        class="next qnav nav"
        :class="curPointIndex === PointList.length - 1 && 'disabled'"
        @click="goNext"
      >
        下一个<van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    VHtml: () => import('components/VHtml.vue'),
  },
  data () {
    return {
      isReciting: true,
      curPointIndex: 0,
      PointList: [] as any,
    }
  },
  created () {
    this.getPointList()
  },
  methods: {
    getPointList () {
      this.$axios({
        method: 'get',
        url: 'course/knowledgePointList',
        data: {
          SectionId: this.$route.query.sectionId,
        },
      }).then(res => {
        this.PointList = res.PointList
      })
    },
    goPrev () {
      if (this.curPointIndex > 0) {
        this.curPointIndex--
      }
    },
    goNext () {
      if (this.curPointIndex < this.PointList.length - 1) {
        this.curPointIndex++
      }
    },
    switchUnderline () {
      this.isReciting = !this.isReciting
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.point-view {
  height: calc(100% - 115px);
  overflow-y: auto;
  flex: 1;
}
.point-title {
  display: flex;
  justify-content: flex-start;
  // height: 32px;
  font-size: 32px;
  line-height: 40px;
  margin: 40px 28px 0;
  font-weight: 600;
  .left-blue {
    background: #04CABC;
    width: 8px;
    height: 26px;
    border-radius: 4px;
    margin-right: 14px;
  }
  // .point-name-span {
  //   width: calc(100% - 40px);
  //   @include ellipsis;
  // }
}
.point-content {
  // height: calc(100% - 115px);
  margin: 20px 48px 40px;
}
.question-footer {
  z-index: 10;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 114px;
  background: #fff;
  // margin: 25px 0;
  font-size: 32px;
  background: #fff;
  .van-icon {
    vertical-align: middle;
  }
}
.nav {
  flex: 1;
  height: 64px;
  line-height: 64px;
  text-align: center;
  position: relative;
}
.qnav {
  color: #333;
}
.disabled {
  color: #999;
}
.card-nav {
  color: #fff;
  background: #04CABC;
  width: 184px;
  height: 64px;
  border-radius: 5px;
}
</style>
